<template>
  <div class="container">
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="options"
    />
    <div class="model">
      <div class="header">
        <img v-if="logo" :src="logo" style="height: 40px" alt="" />
        <span>GEEK-CMS 系统</span>
      </div>
      <!-- 表单 -->
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 0 }"
        :wrapper-col="{ span: 24 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '账号不能为空' }]"
        >
          <a-input
            ref="inFocus"
            v-model:value="formState.username"
            size="large"
            placeholder="请输入账号"
          >
            <template #prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-tooltip placement="topLeft" :open="isShow">
          <template #title>
            <span>大写锁定打开</span>
          </template>
          <a-form-item
            name="password"
            :rules="[
              { required: true, message: '密码不能为空' },
              {
                min: 3,
                max: 8,
                message: '用户名长度3-8位',
              },
            ]"
          >
            <a-input
              v-model:value="formState.password"
              size="large"
              placeholder="请输入密码"
              @keydown="keydown"
              @blur="blur"
            >
              <template #prefix>
                <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input>
          </a-form-item>
        </a-tooltip>

        <a-form-item name="remember">
          <a-row>
            <a-col :span="8">
              <a-checkbox v-model:checked="formState.remember">
                <span style="color: aliceblue">记住密码</span>
              </a-checkbox>
            </a-col>
            <a-col :span="8" :offset="8">
              <p style="text-align: right; color: aliceblue">联系管理员</p>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            :loading="isSending"
            html-type="submit"
            block
            size="large"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { isShallow, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { loginApi } from "@/api/user";
import logo from "@/assets/img/logo.png";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import options from "@/config/particle";
import { loadSlim } from "tsparticles-slim";
import { setStorage, getStorage, removeStorage } from "@/utils/storage";
const router = useRouter();
// 加载粒子背景
const particlesInit = async (engine) => {
  //await loadFull(engine);
  await loadSlim(engine);
};

const particlesLoaded = async (container) => {
  console.log("Particles container loaded", container);
};
// 登录
import { reactive } from "vue";
import { useRouter } from "vue-router";
// 变量记录是否正在发送ajax
let isSending = ref(false);
// 取出storage中数据
let initForm = {
  username: "",
  password: "",
  remember: false,
};

const result = getStorage("loginInfo");

// 方法一
// if (result) {
//   Object.assign(initForm, result);
// }
// 方法二
result && Object.assign(initForm, result); //短路运算

const formState = reactive(initForm);
// 马上发送ajax
isSending.value = false;
const onFinish = (values) => {
  const { password, remember, username } = values;
  // 根据是否记住密码进行存储
  //方法一
  remember ? setStorage("loginInfo", values) : removeStorage("loginInfo");

  // 方法二
  // if (remember) {
  //   // 记住密码
  //   setStorage("loginInfo", values);
  // } else {
  //   // 不记住密码
  //   removeStorage("loginInfo");
  // }
  console.log("Success:", values);

  // 发送ajax-请求登录接口
  loginApi(username, password)
    .then((res) => {
      console.log(res.data);
      if (res.data.code === 200) {
        // success
        message.success("登录成功");
        isSending.value = false;
        // 跳转到新的页面
        router.push({ name: "home" });
      }
    })
    .catch((e) => {
      console.log(e);
      isSending.value = false;
    });
};
// 点击按钮验证失败
const onFinishFailed = (errorInfo) => {
  message.error("验证失败");
};
// 自动获得焦点
const inFocus = ref(null);
onMounted(() => {
  inFocus.value.focus();
});

// 大写锁定是否打开
const isShow = ref(false);
const keydown = ({ key }) => {
  isShow.value = key && key.length === 1 && key >= "A" && key <= "Z";
};
const blur = () => {
  isShow.value = false;
};
</script>

<style scoped lang="less">
.container {
  display: flex;
  justify-content: center;
  align-items: center;

  .model {
    width: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border: 1px solid white;
    border-radius: 6px;
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.8);
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 35px;

      span {
        color: white;
        margin-left: 10px;
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
}

:where(.css-dev-only-do-not-override-19iuou).ant-input-affix-wrapper {
  background-color: transparent;
}

:deep(:where(.css-dev-only-do-not-override-19iuou).ant-input) {
  background-color: transparent;
  color: aliceblue;
}

:deep(:where(.css-dev-only-do-not-override-19iuou).ant-input::placeholder) {
  color: aliceblue;
}

.ant-input-prefix span {
  color: aliceblue !important;
}
</style>
